<template>
    <div class="container">  
      <van-list>
        <van-cell icon="points" v-for="(item,index) in DataList" :key="index" :title="item.UserName">
          <div>
            <h1>
              {{item.UserName}}
            </h1>
          </div>
        </van-cell>
      </van-list>
  
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item" :title="item">
          <div>
            <h1>
              {{item}}
            </h1>
          </div>
        </van-cell>
      </van-list>
  
    </div>
  </template>
  
  <script lang="ts" setup>
  import { getUserList, getToken } from '../../localhttp/loginApi'
  import { onMounted, reactive, ref } from 'vue';
  const DataList = ref<any[]>([]);
  const list = ref<string[]>(['1', '2', '3', '4', '5', '6', '7', '8']);
  
  const loading = ref(false);
  const finished = ref(false); 
  
  const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        list.value.push(list.value.length + '1');
      }
      // 加载状态结束
      loading.value = false;
      // 数据全部加载完成
      if (list.value.length >= 40) {
        finished.value = true;
      }
    }, 1000);
  };
  
  onMounted(() => {
    getUser()
  })
  
  const getUser = async () => {
  
    getUserList().then((res) => {
      DataList.value = res.data;
      //console.log('DataList=========>', JSON.stringify(DataList));
    });
    //const bbb=await getUserList(); 
  }
  
  const toLogin = async () => {
    const aa = await getToken({
      "name": "admin",
      "password": "123456",
    })
    console.log('aa=========>', JSON.stringify(aa));
  }
  
  </script>
    
<style lang="scss" scoped>
.container {
  padding: 5px 10px; 
  &-item {
    padding: 7px 0px;
  }
  &-btn {
    padding: 7px 10px;
  }
}
</style>